import Footer from './components/Footer';
import MenuList  from './components/menu/infoList';
import CommentApp from './components/menu/commentList';
import {menuList,commentList} from './components/menu/data';
import GetUseEffect from './components/menu/getUseEffcet.jsx';

import ReduxIndex from './components/redux/index.jsx';
import { useState ,createContext} from "react";

// 项目根组件
function App() {
const MsgContext = createContext();

  const [flag, setFlag] = useState(false);
  const [title, setTitle] = useState("this is my first react app");
  const [showDivId, setShowDivId] = useState("2");
  const showTitle = (title,e) => {
    console.log("title 入参: ",title,"   e 是事件对象",e);
    setTitle(title);
  }
  const startAction = () => {
    console.log("开始功能演示");
    setFlag(true);
  }
  return (
    <div className="App">
      {!flag ? <button onClick={startAction}>开始功能演示</button>:
     ( <>
       <span onClick={(e)=>{showTitle('功能演示',e)}}>{title}</span>
        <span>
          <button onClick={()=>{setShowDivId("1")}}>查看菜单</button>
          <button onClick={()=>{setShowDivId("2")}}>查看评论</button>
          <button onClick={()=>{setShowDivId("3")}}>查看请求渲染</button>
          <button onClick={()=>{setShowDivId("4")}}>查看redux </button>
        </span>
        <div>
          <MsgContext.Provider value={showDivId}>
          {showDivId=="2" &&<CommentApp commentList={commentList}></CommentApp>}
          {showDivId=="1" &&<MenuList menuList={menuList}></MenuList>}
          {showDivId=="3" &&<GetUseEffect menuList={menuList}></GetUseEffect>}
          {showDivId=="4" &&<ReduxIndex ></ReduxIndex>}
          
          </MsgContext.Provider>
        
          
        </div>
      </>)
      
      }
     
      <Footer></Footer>
    </div>
   
  );
}

export default App;
